import React, { Component } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { Divider } from 'antd';
import './device.less'

export default class Device extends Component {
  constructor(a) {
    super(a);
    this.state = {

    }
  }
  componentWillUnmount() {

  }
  componentDidMount() {
    meshLog("wjk scheduleSet", this.state.scheduleSet);

  }
  render() {
    return (
      <div className="device" >
        <div className="devicedaohang">
          <span className='devicedaohangzuo' >位置： 数据库管理 》设备编号</span>

        </div>
        <div className="deviceneirong">
          <div className="dataneirong1" >
            <div className="device" >
              <div className="devicetitle" >条件搜索</div>
              <Divider />
              <div className="devicedate" >
                <div className="fruittiaojian">
                  <label className="fruit1" for="fruit1">组名称</label>
                  <select id="fruit1" style={{ color: "#888888" }} name="fruit1">
                    <option disabled selected >请选择性别</option>
                    <option value="nan">男</option>
                    <option value="nv">女</option>
                  </select>

                  <label className="fruit2" for="fruit2">设备名</label>
                  <select id="fruit2" style={{ color: "#888888" }} name="fruit2">、
                    <option disabled selected>请选择跑道</option>
                    <option value="670">670</option>
                    <option value="530">530</option>
                    <option value="240">240</option>
                    <option value="320">320</option>
                  </select>

                  <label className="fruit3" for="fruit3">mac地址</label>
                  <select id="fruit3" style={{ color: "#888888" }} name="fruit3">、
                    <option disabled selected>请选择跑道</option>
                    <option value="670">670</option>
                    <option value="530">530</option>
                    <option value="240">240</option>
                    <option value="320">320</option>
                  </select>
                </div>
                <label className="fruit4" for="fruit4">设备类型</label>
                <select id="fruit4" style={{ color: "#888888" }} name="fruit4">
                  <option disabled selected >请选择性别</option>
                  <option value="nan">男</option>
                  <option value="nv">女</option>
                </select>

                <label className="fruit5" for="fruit5">设备状态</label>
                <select id="fruit5" style={{ color: "#888888" }} name="fruit5">、
                  <option disabled selected>请选择跑道</option>
                  <option value="670">670</option>
                  <option value="530">530</option>
                  <option value="240">240</option>
                  <option value="320">320</option>
                </select>

                <label className="fruit6" for="fruit6">开关</label>
                <select id="fruit6" style={{ color: "#888888" }} name="fruit6">、
                  <option disabled selected>开关</option>
                  <option value="670">开</option>
                  <option value="530">关</option>
                </select>
                <button className="handleFruit" onClick={() => { this.handleFruitChange() }}>
                  查询
                </button>
              </div>
            </div>
            <div className="show"  >
              <div className="showtitle" >设备列表</div>
              <div className="showdate" >
                <div className="titledate">
                  <span className="span1">序号</span>
                  <span className="span1">用户名</span>
                  <span className="span1">性别</span>
                  <span className="span1">创建时间</span>
                  <span className="span1">更新时间</span>
                  <span className="span1">夜跑长度</span>
                  <span className="span1">总里程</span>
                  <span className="span1">全程时间</span>
                  <span className="span1">完成度</span>
                </div>
                {
                  this.state.currentItems && this.state.currentItems.map((element, key) => {
                    if (!element.children) {
                      return (
                        <h1 style={{ marginTop: 12, fontSize: 16, color: '#282D32', }}>{element} </h1>
                      )
                    }
                    else {
                      return (
                        <span>{element}</span>
                      )
                    }
                  })
                }
              </div>
              <div className='zongyeshu'>
                <span style={{ marginLeft: 40 }}>共{this.state.totalPages}页</span>
                <label className="PerPage" for="PerPage">每页显示</label>
                <select id="PerPage" style={{ color: "#000000" }} name="PerPage">
                  <option value="10">10</option>
                  <option value="8">8</option>
                  <option value="5">5</option>
                </select>个
              </div>
              <div className='current'>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.gotoFirstPage() }}>
                  首页
                </button>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.goToPreviousPage() }}>
                  上一页
                </button>
                {Array.from({ length: this.state.totalPages }, (_, i) => (
                  <button
                    key={i}
                    onClick={() => { this.goToPage(i + 1) }}
                    style={{ margin: '2px' }}
                    disabled={this.state.currentPage === i + 1}
                  >
                    {i + 1}
                  </button>
                ))}
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToNextPage() }}>
                  下一页
                </button>
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToEndPage() }}>
                  末页
                </button>
                <span>&nbsp;&nbsp;共{this.state.totalPages}页&nbsp;&nbsp;</span>
                到 <input id='inputid' style={{ width: 30 }} type='number' min={1} ></input>页&nbsp;&nbsp;
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.changeTOPage() }}>
                  确定
                </button>
              </div>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
